<!--
 * @Author: CemCode
 * @Date: 2023-10-07 10:16:54
 * @LastEditTime: 2024-12-04 15:29:05
 * @Description: file content
-->
<template>
    <div class="dashboard_card_con">
        <div v-if="nav_con_enable" class="title">
            <p>{{ this.title }}</p>
            <p v-if="refresh_enable" class="refresh el-icon-refresh-right" @click="onRefresh"></p>
            <p v-else class="el-icon-refresh-right hide"></p>
        </div>
        <div class="card_content">
            <slot>
                <div class="gugu_con">
                    <img src="https://fastly.jsdelivr.net/gh/turnturn/images@main/www/vue-blog/gugugu_base.png" />
                </div>
            </slot>
        </div>
    </div>
</template>
<script>
export default {
    name: "admin-card",
    props: {
        title: {
            type: String,
            default: "",
        },
        refresh: {
            type: Function,
        },
        refresh_enable: {
            type: Boolean,
            default: true
        },
        nav_con_enable:{
            type: Boolean,
            default: true
        }
    },
    methods: {
        onRefresh() {
            this.refresh(this.title)
            console.log(this.$slots);
        }
    }
};
</script>
<style lang="scss" scoped>
.dashboard_card_con {
    flex: 1 auto;
    height: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 rgb(212, 212, 212);
    .title {
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333; 
        border-bottom: 1px solid rgb(206, 206, 206);

        .refresh {
            font-size: 14px;
            color: #999;
            transition: 1s;
        }
        .refresh:hover {
            transition: 1s;
            transform: rotate(90deg);
            color: #333;
            cursor: pointer;
        }

        .hide{
            opacity: 0;
        }
    }
    .card_content {
        width: 100%;
        height: 250px;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;
        .gugu_con {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                height: 30%;
            }
        }
    }
}
</style>